<template>
  <BasicModal width="30%" :centered="true" v-bind="$attrs"  @register="registerModal" >
    <template #closeIcon>
      <div class="close">
        <i class="iconfont icon-guanbi"></i>
      </div>
    </template>
    <template #title>
      <div class="title-box">
        <div class="title">{{ props.isAgain?'重发邮件':'发送培训邮件' }} </div>
        <div class="btns" >
          <Button size="small" class="copy" @click="handleCopyJson" color="success">复制</Button>
          <Button size="small" @click="handleReadJson" color="error">粘贴</Button>
        </div>
      </div>
    </template>
    <template #footer>
      <div class="footer">
        <Button color="#ABBACD" @click="closeModal">取消</Button>
        <Button type="primary" @click="handleSubmit" >确定</Button>
      </div>
    </template>
    <BasicForm @register="registerForm"  style="margin-top: 40px;"></BasicForm>  
    <EmailDialog :data="data" @close="close" :open="visible"  :selectList="props.selectList" :params="params" />
  </BasicModal>
</template>

<script lang="ts" setup>
import { computed, defineComponent, ref, unref } from 'vue'
import { Button } from "@/components/Button";
import { BasicModal, useModalInner } from '@/components/Modal'
import { BasicForm, useForm } from '@/components/Form'
import { copyText,readText } from '@/utils/copyTextToClipboard'
import { message } from 'ant-design-vue'
import EmailDialog from './EmailDialog.vue'
import { selectCommonConfigDetail } from '@/api/applay/trainlist/self'

const props = defineProps({
  options: {
    type: Array,
    default: () => {
      return []
    },
  },
  selectList:{
    type: Array,
    default: () => {
      return []
    },
  },
  data:{
    type: Object,
    default: () => {
      return {}
    },
  },
  isAgain:{
    type:Boolean,
    default:false
  }
})

const [registerForm, { resetFields, setFieldsValue, updateSchema, validate,getFieldsValue }] = useForm({
  labelWidth: 100,
  baseColProps: { span: 24 },
  schemas: [
    {
      field: 'reportAddress',
      label: '报到地点：',
      component: 'InputTextArea',
      rules: [
        {
          required: true,
          message: '请输入报到地点',
        },
      ],
    },
  ],
  showActionButtonGroup: false,
})

const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
  resetFields()
  setModalProps({ confirmLoading: false })
  let datax = {
  }
  setFieldsValue(datax)
})

// 复制数据 
function handleCopyJson() {
  let val = JSON.stringify(getFieldsValue())
  copyText(val)
}

// 粘贴数据
function handleReadJson(){
  readText().then(res => {
    try{
      console.log(res,'res')
      let val = JSON.parse(res)
      setFieldsValue(val)
      message.success('粘贴成功')
    }catch{
      message.error('请输入正确的json格式')
    }
  })
}

const emit = defineEmits(['success', 'register'])
const params = ref<object>({})
const visible = ref(false)

// 打开弹窗
async function handleSubmit() {
  const values = await validate();
  console.log(values)
  params.value = values
  visible.value = true
}

// 关闭弹窗
function close() {
  visible.value = false
  closeModal()
  emit('success')
}

</script>

<style lang="less" scoped>
.content {
  .items {
    margin-top: 5px;
  }
}

.mt-30 {
  margin-top: 20px !important;
}

.btns {
  position: absolute;
  right: 45px;
  top: 16px;

  .copy {
    margin-right: 10px;
  }
}
</style>